@import '../../style/common.less';

.token-body {
  display: flex;
  transition: opacity 300ms;

  &-left {
    display: flex;
    width: 680px;
    overflow: hidden;
    .home-body-border();

    background: var(--home-color-bg-1);
  }

  &-right {
    margin-left: 20px;
    width: 480px;
  }
}

.token-form {
  display: flex;
  flex-direction: column;
  width: 100px;
  padding: 32px;
  border-right: 1px solid var(--home-color-border);

  :global(.arco-space) {
    display: flex;
  }

  .form-bottom {
    margin-top: auto;
  }
}

.token-display {
  width: 514px;

  .token-lattice {
    position: relative;
    height: 100%;
    .home-lattice-background();

    .token-component-wrapper {
      width: 266px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 30px);
    }
  }

  .token-code {
    height: 200px;
  }
}

.token-component,
.token-component-wrapper {
  :global(.arco) {
    &-popover-content,
    &-popconfirm-content,
    &-input-inner-wrapper,
    &-btn {
      border-radius: var(--home-token-component-border-radius) !important;
      border: var(--home-token-component-border) solid var(--color-border) !important;
    }

    &-popconfirm-arrow {
      border-width: var(--home-token-component-border) !important;
      // TODO 组件库定位有问题，暂时先手动推到中间位置
      left: 126px !important;
    }
  }

  * {
    font-weight: var(--home-token-component-font-weight) !important;
  }
}

body[arco-theme='dark'] {
  .token-code {
    border-top: 1px solid var(--home-color-border);
  }
}

:global(html.rtl) {
  .token-body {
    &-right {
      margin-left: 0;
      margin-right: 20px;
    }
  }
}
